<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		 addClass()  有参：1个参和多个参
		             语法：addClass("类名")
					 <p class="类名">
					 语法：addClass("类名1 类名2");
					 <p class="类名1 类名2">
					 功能：匹配所有元素集合中的所有元素
					      添加一个或者多个类名操作
					 理解：元素添加存在的样式	  
		 removeClass()  功能：匹配所有元素集合中的所有元素
					    移除一个或者多个类名操作
		 toggleClass()  功能：如果元素有类名移除，没有则添加
		 hasClass()  功能：检查匹配元素集合中是否包含指定类名
		                  返回值bool
		 -->
		 <!-- 要求：1.jq引入
		           2.html： div id="targtElement"
				            4个按钮    id="addClassBtn"
							           id="removeClassBtn"
									   id="toggleClassBtn"
									   id="hasClassBtn"
				            div id="resultArea"
					3.css:  .bgColor{300*300 背景色随意}
							.broders{ 10个像素实现红色边框 倒角画圆} -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #e5dcff;
			}
			.broders{
				border: 10px solid red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targtElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button  id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		
		<script>
			//1.点击 添加类名  按钮 添加效果【样式】 300*300 背景色紫色
			$("#addClassBtn").click(function(){
				//div添加样式---存在样式:类名
				$("#targtElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//3.点击 移除类名  按钮 添加效果【样式】 300*300 背景色紫色 圆 外层 10px红色框
		    $("#removeClassBtn").click(function(){
		    	//div添加样式---存在样式
		    	$("#targtElement").removeClass("broders");
		    	$("#resultArea").html("<h4>移除样式类名：broders</h4>");
		    });
			//4.点击 切换类名  按钮  添加效果【样式】
			//  300*300 背景色紫色 圆 外层 10px红色框
			$("#toggleClassBtn").click(function(){
				//div添加样式---存在样式
				$("#targtElement").toggleClass("broders");
				$("#resultArea").html("<h4>切换样式类名：broders</h4>");
			});
			//5.点击 切换类名  按钮  添加效果【样式】
			//  去掉 300*300 背景色紫色 
			 $("#toggleClassBtn").click(function(){
			 	//div添加样式---存在样式
			 	$("#targtElement").toggleClass("bgColor");
			 	$("#resultArea").html("<h4>切换样式类名：broders</h4>");
			 });
			//6.检查类名是否存在：true存在 false不存在
			$("#hasClassBtn").click(function(){
			    //div添加样式---存在样式
				var hc=$("#targtElement").hasClass("bgColor");
				$("#resultArea").text("检查当前样式是否存在："+hc);
			});
		</script>
		
	</body>
</html>